<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .one{
            width: 100%;
            height: 200px;
            background-color: red;
        }
        .two{
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id="root">

    </div>
</body>
<script src="../react.js"></script>
<script src="../react-dom.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
    let bus = {
        list:[],
        emit(eventName,msg){
            let index = this.list.findIndex((item)=>{
                return item.eventName ===eventName
            })
            if(index!==-1){
                this.list[index].event(msg);
            }
        },
        on(eventName,callback){
            let obj = {
                eventName,
                event:callback
            }
            this.list.push(obj)
        }
    }
    class App extends React.Component {
        state = {

        }
        render() {
            return (
                <div>
                    <One/>
                    <Two/>
                </div>
            )
        }
    }
    class One extends React.Component {
        state={
            num:""
        }
        constructor(){
            super();
            // 订阅消息
            bus.on("getNum",(num)=>{
                console.log(num)
                this.setState({
                    num
                })
            })
        }
        render() {
            return (
                <div className='one'>
                    one组件----{this.state.num}
                    <Three/>
                </div>
            )
        }
    }
    class Two extends React.Component {
        state = {
            num:0
        }
        render() {
            return (
                <div className='two'>
                    two组件 ---{this.state.num}
                    <button onClick={()=>{
                        bus.emit("getNum",this.state.num)
                    }}>向one组件发送消息</button>
                    <button onClick={()=>{
                        bus.emit("getThree","好好学习天天向上")
                    }}>向three组件发消息</button>
                </div>
            )
        }
    }
     class Three extends React.Component {
            constructor(){
                super();
                bus.on("getThree",(msg)=>{
                    console.log(msg)
                })
            }
            state = {
    
            }
            render() {
                return (
                    <div>
                       <h1>tree</h1>
                    </div>
                )
            }
        }
    ReactDOM.render(<App />, document.getElementById("root"))
</script>

</html>